<template>
  <div class="page-content">
    <!-- 顶部导航 -->
    <header class="bg-white shadow-sm sticky top-0 z-10">
      <div class="container mx-auto px-4 py-3 flex items-center">
        <h1 class="text-lg font-semibold">工具</h1>
      </div>
    </header>

    <main class="container mx-auto px-4 mt-4">
      <div class="grid grid-cols-2 gap-4">
        <!-- 案由分析 -->
        <router-link
          to="/case-analysis"
          class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow"
        >
          <div class="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-3">
            <i class="fas fa-search text-blue-600 text-xl"></i>
          </div>
          <h3 class="font-medium text-gray-900 mb-1">案由分析</h3>
          <p class="text-xs text-gray-500">AI智能分析案件类型</p>
        </router-link>

        <!-- 历史文件列表 -->
        <router-link
          to="/usage-history"
          class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow"
        >
          <div class="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-3">
            <i class="fas fa-folder-open text-green-600 text-xl"></i>
          </div>
          <h3 class="font-medium text-gray-900 mb-1">历史文件列表</h3>
          <p class="text-xs text-gray-500">查看和管理历史文件</p>
        </router-link>

        <!-- 管辖权分析 -->
        <router-link
          to="/jurisdiction-analysis"
          class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow"
        >
          <div class="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-3">
            <i class="fas fa-balance-scale text-purple-600 text-xl"></i>
          </div>
          <h3 class="font-medium text-gray-900 mb-1">管辖权分析</h3>
          <p class="text-xs text-gray-500">智能确定案件管辖法院</p>
        </router-link>

        <!-- 诉讼费计算 -->
        <router-link
          to="/litigation-fee-calculator"
          class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow"
        >
          <div class="w-12 h-12 bg-yellow-100 rounded-lg flex items-center justify-center mb-3">
            <i class="fas fa-calculator text-yellow-600 text-xl"></i>
          </div>
          <h3 class="font-medium text-gray-900 mb-1">诉讼费计算</h3>
          <p class="text-xs text-gray-500">智能计算诉讼费用</p>
        </router-link>

        <!-- 立案指引 -->
        <router-link
          to="/filing-guide"
          class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow"
        >
          <div class="w-12 h-12 bg-red-100 rounded-lg flex items-center justify-center mb-3">
            <i class="fas fa-gavel text-red-600 text-xl"></i>
          </div>
          <h3 class="font-medium text-gray-900 mb-1">立案指引</h3>
          <p class="text-xs text-gray-500">智能立案流程指导</p>
        </router-link>

        <!-- 法律咨询 -->
        <router-link
          to="/legal-consultation"
          class="bg-white rounded-xl shadow-md p-4 hover:shadow-lg transition-shadow"
        >
          <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center mb-3">
            <i class="fas fa-robot text-indigo-600 text-xl"></i>
          </div>
          <h3 class="font-medium text-gray-900 mb-1">法律咨询</h3>
          <p class="text-xs text-gray-500">AI智能问答服务</p>
        </router-link>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'Tools',
  methods: {
    showComingSoon(featureName) {
      // 使用浏览器原生的alert提示
      alert(`${featureName}功能正在开发中，敬请期待！`);
      
      // 或者可以使用更友好的提示方式，比如Toast组件
      // 这里使用简单的alert作为示例
    }
  }
}
</script>
